<template>
    <div class="registers-box">
        <el-row style="width: 80%;">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                
                    <div style="text-align: center; font-size: 38px; color: #757570;">开始挂号</div>
                
            </el-col>
            
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-input v-model="saveForm.name" autocomplete="off" >
                        <template #append>
                            <el-button @click="getUser()">
                                <el-icon class="el-icon--right"><Search /></el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </el-col>

                <el-table
                    :data="tableData"
                    border
                    height="320"
                    style="width: 100%; margin-top: 20px"
                >
                    <el-table-column prop="empno" label="学号"  width="160"/>
                    <el-table-column prop="cname" label="姓名"  width="260"/>
                    <el-table-column prop="gender" label="性别" width="60">
                        <template #default="scope">
                            {{ scope.row.gender == 'F' ? '女' : '男' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="gradelevel" label="年级" width="60"/>
                    <el-table-column prop="deptid" label="班级" width="60"/>
                    <el-table-column prop="email" label="邮箱" />
                    <el-table-column prop="email" label="操作" >
                        <template #default="scope">
                            <el-button @click="register(scope.row)">
                                挂号
                            </el-button>
                        </template>
                        
                    </el-table-column>

                </el-table>
        </el-row>

    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { search } from '@/api/registers'
import useStudentInfoStore from '@/stores/students'
import { storeToRefs } from 'pinia';

const router = useRouter()
const studentsInfoStore = useStudentInfoStore()
const studentsStore = storeToRefs(studentsInfoStore)

const saveForm = reactive({
    name: ''
})

const tableData = ref([])
const getUser = () => {
    search({userName: saveForm.name}).then(res => {
        if ( res.code == 200 ) {
            tableData.value = res.data
        } else {
            ElMessage.error('数据加载失败。')
        }
    })
}

const register = (row) => {
    studentsInfoStore.setInfo(row)
    router.push({name: 'registerFill'})
}

</script>

<style lang="scss" scoped>
.registers-box {
    padding: 20px;
    height: calc(100vh - 240px);
    width: calc(100% - 40px);;
    display: flex; 
    justify-content: center; 
    align-items: center;
}
</style>